<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html ng-app="app" id="ng-app">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<%@include file="/include/style.jsp"%>
<%@include file="/include/script.jsp"%>
<script type="text/javascript" src="/js/page/provider.js?v=<%=Constants.VERSION %>"></script>
</head>
<body ng-controller="ProviderCtrl">
	<div class="toolbar">
		<div class="left-area">
			<form ng-submit="search()">
				<input type="text" id="name" ng-model="formCondition.name" placeholder="供应商名模糊匹配" class="form-control search-box">
			</form>
		</div>
  		<div class="right-area">
  			<permission:valid permission="<%=Constants.PROVIDER_CUD%>">
				<button class="btn btn-success" ng-click="createProvider()"><i class="fa fa-plus"></i> 新增 </button>
			</permission:valid>
  		</div>
	</div>
	
	<div ng-if="page.rows.length>0">
		<table class="data-table">
		   <thead>
			  <tr>
				  <th width="5%">序号</th>
				  <th width="20%" style="text-align:left">供应商</th>
				  <th width="60%" style="text-align:left">描述</th>
				  <permission:valid permission="<%=Constants.PROVIDER_CUD%>">
				  <th width="15%">操作</th>
				  </permission:valid>
			  </tr>
		   </thead>
		   <tbody>
			  <tr ng-repeat="provider in page.rows">
				  <td align="center" ng-bind="($index)+1"></td>
				  <td ng-bind="provider.name"></td>
				  <td ng-bind="provider.description"></td>
				  <permission:valid permission="<%=Constants.PROVIDER_CUD%>">
				  <td align="center">
					  <span class="btn btn-link" ng-click="editProvider(provider)"><i class="fa fa-pencil"></i> 修改</span>
					  <span class="btn btn-link" ng-click="deleteProvider(provider)"><i class="fa fa-trash"></i> 删除</span>
				  </td>
				  </permission:valid>
			  </tr>
		   </tbody>
		</table>
		
		<%@include file="/include/pageBar.jsp" %>
	</div>
	
	<div class="alert alert-success"  style="clear: both;" ng-if='page.rows.length==0'>
		暂无数据！
	</div>
	
	<div id="modalPanel" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="formLabel" aria-hidden="true" data-backdrop="static">
		<form name="providerForm" ng-submit="saveProvider()" novalidate>
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" ng-click="closeModal()">&times;</button>
					<h4 class="modal-title" id="formLabel">
						<span ng-if="mode=='create'">新增供应商</span>
						<span ng-if="mode=='update'">修改供应商</span>
					</h4>
				</div>
				<div class="modal-body form-horizontal">
					<div class="form-group" ng-class="providerForm.name.$dirty && providerForm.name.$invalid && 'has-error'">
                        <label class="col-sm-3 control-label">
							<span class="star-icon">*</span>供应商：
                        </label>
                        <div class="col-sm-7">
							<input type="text" class="form-control" ng-model="editingProvider.name" name="name" 
								maxlength="50" required/>
							<span class="text-danger" ng-if="providerForm.name.$dirty && providerForm.name.$invalid">
								<span ng-if="providerForm.name.$error.duplicated">供应商名称重复</span>
							</span>
                        </div>
                    </div>
                    <div class="form-group" ng-class="providerForm.description.$dirty && providerForm.description.$invalid && 'has-error'">
                        <label class="col-sm-3 control-label">
							描述：
                        </label>
                        <div class="col-sm-7">
							<textarea class="form-control" ng-model="editingProvider.description" name="description" 
								maxlength="255" rows="5"></textarea>
							<span class="text-danger" ng-if="providerForm.description.$dirty && providerForm.description.$invalid">
								<span ng-if="providerForm.description.$error.pattern">必须为英文字母或数字</span>
							</span>
                        </div>
                    </div>
                    
                    <div class="form-group" ng-if="mode == 'create'">
                        <div class="col-sm-7 col-sm-offset-3">
							<p class=" text-danger" ng-if="providerForm.globalErrorMsg">
								错误：{{providerForm.globalErrorMsg}}
							</p>
                        </div>
                    </div>
				</div>
				<div class="modal-footer">
					<button type="submit" class="btn btn-primary" ng-disabled="providerForm.$invalid">确定</button>
					<button type="button" class="btn btn-default" ng-click="closeModal()">取消</button>
				</div>
			</div>
		</div>
		</form>
	</div>

</body>
</html>